Blog - LINE ENGINEERING

이상원, 김은재

LINE에서 프론트엔드 업무를 담당하고 있습니다 / LINE에서 UI 개발을 담당하고 있습니다

LINE Web Timeline 이미지 얼굴 인식 기능 적용
이상원, 김은재2021-10-21
LINE에서 프론트엔드 업무를 담당하고 있습니다 / LINE에서 UI 개발을 담당하고 있습니다
안녕하세요. 저희는 LINE UIT 조직에서 프런트엔드 업무를 담당하고 있는 김은재, 이상원입니다. 이번 글에서는 저희가 LINE Web Timeline에서 얼굴 인식을 통해 전달받은 좌표를 CSS로 표현하기 위해 고민했던 내용을 공유하려고 합니다. 프런트엔드 개발을 진행하다 보면 CSS를 사용하면서도 막상 그 스펙을 깊이 이해하지 못하고 사용하게 되는 경우가 종종 있습니다. 이번 작업을 담당하며 그동안 공부가 부족했다는 것을 통감했는데요. CSS를 이해하면 할수록 브라우저에서 CSS를 구현하기 위해 얼마나 많은 고민이 필요한지 깊이 공감하게 되었습니다. 글은 다음과 같은 순서로 진행합니다. 배경 설명 구현 과정 중심 좌표 산출 CSS image-size 표현 방식 정의 중심 좌표를 CSS로 구현 이미지를 9분할해 position 클래스 분기 처리 픽셀을 사용한 position
- Web Development

1